<template>
  <!-- 洗车邀请有礼 -->
  <view style="background-color: #fbd220;height: 100%;padding-bottom: 50rpx;">
  <u-toast ref="uToast" />
    <!-- 导航栏 -->
    <view class="headbox" @click="returnpage">
      <view class="uiconcss">
        <u-icon class="uiconone" name="arrow-left" color="#ffffff" size="34rpx"></u-icon>
      </view>
    </view>
    <!-- 标题 -->
    <view class="bgi">

    </view>
    <view class="invitation">
      <!-- 优惠券 -->
      <view class="coupon">
        <!-- 合伙人攻略 -->
        <view v-if='type' class="flex flex-jc-fe strategy flex-ai-c" @click="goStrategy('/pages_common/pages_me/strategy/strategy')">
          <view>合伙人攻略</view>
          <view>
            <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
          </view>
        </view>

        <!-- 刻度条 -->

        <view class="scale" v-if='type'>
          <view class="list">
            <!-- 刻度尺 -->
            <view class="number">
              <view class="line">
                <view class="line-left">0</view>
              </view>
              <view class="line">
                <view class="line-left-s"></view>
              </view>
            </view>
            <view class="number">
              <view class="line">
                <view class="line-num">25</view>
              </view>
              <view class="line">
                <view class="line-s"></view>
              </view>
            </view>
            <view class="botline">
              <!-- 放大 -->
              <view class="enlarge">
                <view class="enlarge-main" :style="{left:percent-9 + '%'}">
                  <view style="color: #000000;"><text style="font-weight: bold;">{{percent/4}}</text><text style="color: #ACACAC;">/25</text></view>
                </view>

              </view>
              <view class="topline" :style="{width:percent + '%'}"></view>
              <view class="left"></view>
              <view class="right" :style="{left:percent + '%'}"></view>
            </view>
            <view class="flex" style="width: 537rpx;margin: 0 auto;">
              <view class="pack" v-for="(item,index) in 24" :key='index'>
                <view class="kd"></view>
              </view>
            </view>
            <view class="more">再邀请{{25-percent/4}}名好友，就能成为7迈车合伙人，赚取丰厚奖励！</view>
          </view>
        </view>
        <view class="flex">
          <!-- 微信好友 生成美图 -->
          <view class="wxbtn flex flex-jc-c" @click="show=true">
             <view class="flex flex-ai-c">
               <i-icon icon="iconweixin1" color="#ffffff" size="45rpx" style="margin-right: 10rpx;"></i-icon>
               微信好友
             </view>
          </view>
          <view class="btn flex flex-jc-c" @click="meituClick">
             <view class="flex flex-ai-c">
               <i-icon icon="icontupian" color="#3D3D3D" size="37rpx"  style="margin-right: 10rpx;"></i-icon>
               生成美图
             </view>
          </view>
        </view>


        <!-- 用户数据量 -->
        <view class="user">
          <text @click="lxr">
            99%的用户都在这里<u-icon name="arrow-right-double" size="20"></u-icon>
          </text>

        </view>

      </view>

      <!-- 参与步骤 -->
      <view class="participation">
        <img src="https://files.yzsheng.com/client/imgs/yqylcybz.png" alt="" style="width: 100%;">
      </view>

      <!-- 我的成就 -->
      <view class="achievement" @click="achievement">
        <view class="flex flex-jc-sb achievement-head">
          <view class="right flex flex-ai-c">
            <view>
              <i-icon icon="iconfapiao1" color="#FBD220"></i-icon>
            </view>
            <view class="me">我的成就</view>
          </view>
          <view class="left flex flex-ai-c">
            <view class="look">查看邀请记录</view>
            <view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view class="achievement-me flex flex-jc-sa flex-ai-c">
          <view class="achievement-me-top">
            <view class="num"><text>{{shareInfo.shareCount}}</text>人</view>
            <view class="describe">我邀请的</view>
          </view>
          <view class="achievement-me-top">
            <view class="num"><text>{{shareInfo.myAward}}</text>元</view>
            <view class="describe">已获得奖励</view>
          </view>
          <view class="achievement-me-top">
            <view class="num"><text>{{shareInfo.allMoney}}</text>元</view>
            <view class="describe">我的收益</view>
          </view>
        </view>
      </view>
    </view>

    <share v-model='show' @change='goPage' :isDownload='false'></share>
  </view>
</template>

<script src='./carwash_invitation.js'></script>

<style lang="scss" scoped>
  @import './carwash_invitation.scss';
</style>
